當我們在開發專案時，模組的體積會隨著功能的增加而變的龐大，甚而影響到使用者的體驗，這時候就需要做所謂的Code Splitting。Code Splitting的概念為以下兩點:

1. 將不常變動或更新的程式獨立打包出來，讓瀏覽器讀取快取而不用重新讀取全部的程式
   可以將不常更動的第三方套件獨立出來，如React之類。
2. 依照功能模組打包你的程式，且在使用該功能時才去載入模組
   可以減少程式初始化時下載的內容。

import()

使用動態import()的語法，可以讓你在使用該功能時才載入程式。
引入前:

import { add } from './math';

console.log(add(16, 26));

引入後:

import("./math").then(math => {
  console.log(math.add(16, 26));
})

React.lazy

React.lazy可以幫助你讓程式做到動態載入，使用方法為React.lazy渲染一個動態import()的component。
引入前:

import OtherComponent from './OtherComponent';

引入後:

const OtherComponent = React.lazy(() => import('./OtherComponent'));

lazy component需要在 Suspense component中渲染，Suspense component可已讓等待載入的component顯示loading文字，等待程式載入完畢。

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}